<template>
  <div class="ele-body">
    <!-- 数据表格 -->
    <el-card shadow="always" body-style="padding: 30px 40px">
      <div class="tips-content">
        <div class="tips-item">
          <p class="title">运行中</p>
          <p class="sign"></p>
        </div>
        <div class="tips-item">
          <p class="title">清洗中</p>
          <p class="sign" style="background-color: rgb(14, 161, 95)"></p>
        </div>
        <div class="tips-item">
          <p class="title">停止中</p>
          <p class="sign" style="background-color: rgb(180, 188, 188)"></p>
        </div>
      </div>
      <div class="device-content">
        <div :style="{backgroundColor: item.status == 1 ? 'rgb(255, 115, 0)' : item.status == 5 ? 'rgb(14, 161, 95)' :  item.status == 0 ? '#ccc':''}" class="item" v-for="(item,index) in tableData" :key="index">
          <p class="code">{{ item.deviceCode }}</p>
          <p class="code">{{ item.deviceName }}</p>
          <p class="code">温度：{{ item.temperature?item.temperature:'暂无' }}</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { QueryCustomerDeviceByCondition } from '@/api/customermanager/customerInfomanager';
export default {
  name: 'Customerdevicestatus',
  data() {
    return {
      currentPage:1,
      formInline: {
        title: ''
      },
      tableData: []
    };
  },
  created() {
    this.initData();
    this.getGuid();
  },
  methods: {
    formatDateTime(isoString) {
      const date = new Date(isoString);
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // 月份从0开始，需+1
      const day = date.getDate();
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },


    initData() {
      QueryCustomerDeviceByCondition({
        pageIndex: this.currentPage,
        pageSize: 1000,
        conditions: {
          keyword: this.formInline.title,
          status: 0
        }
      })
        .then((res) => {
          this.tableData = res.items;
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
  }
};
</script>
<style lang="scss" scoped>
.tips-content {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  .tips-item {
    display: flex;
    align-items: center;
    margin-right: 20px;
    .title {
      font-size: 14px;
    }
    .sign {
      width: 15px;
      height: 15px;
      background-color: rgb(255, 115, 0);
      margin-left: 5px;
    }
  }
}
.device-content {
  width: 100%;
  display: flex;
  // justify-content: space-around;
  flex-flow: wrap;
  .item {
    margin: 0 60px;
    margin-block: 30px;
    width: 160px;
    height: 160px;
    background-color: #ccc;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    .code {
      font-size: 16px;
      color: #000;
    }
  }
}
</style>